<template>
    <div class="user-box">
        <search />
        <el-divider />
        <div class="user-btn">
            <el-button type="primary" @click="addUser">添加用户</el-button>
        </div>
        <userTable :data="data" :total="total" :loadData="setPage" :page="currentPage" />
        <!--  弹出层 -->
        <mydialog :dialogFormVisible="dialogFormVisible"  @setVisable="setVisable"/>

      

    </div>
</template>

<script setup lang="ts">
import {ref} from "vue"
import { computed } from "vue"
import { useRouter, useRoute } from "vue-router"
import search from "./ui/search.vue"
import userTable from "./ui/userTable.vue"
import mydialog from "./ui/mydialod.vue"

//  获取路由的实例对象
const router = useRouter()
//  获取路由的信息对象
const route = useRoute()

//  引入数据，并且通过父子传值的方式传给子组件
//  也可以理解是自定义的钩子函数， 用来获取钩子信息
import useOrderList from "@/hooks/useOrder"

//  利用计算属性，来回获取当前的页码
//  刷新不换页
const currentPage = computed(() => {
    return route.query.page ? +route.query.page : 1
})

const [data, total, loadData] = useOrderList(currentPage.value)

//  更换页码，编程式导航
const setPage = (page: number) => {
    router.replace(`?page=${page}`)
    loadData(page)
}

//  新增用户
const dialogFormVisible = ref(false)
//  定义更改弹出层显示盒隐藏的事件
const setVisable = (v: boolean)=>{
    dialogFormVisible.value = v
}
const addUser = () => {
    //  点击事件，触发修改弹出层的事件更改弹窗的显示和隐藏
    setVisable(true)
}

</script>

<style scoped lang="scss">
.user-box {
    .user-btn {
        margin-top: 10px;
    }
}
</style>